<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name"><br>
    <span>{{name|firstUpper|lastUpper}}</span><br>
    <span>{{name|aba}}</span><br>
    <span>{{name|mysubstr(1,3)}}</span>

</div>


<script type="text/javascript">
    Vue.filter('firstUpper',function(val){
        return val.charAt(0).toUpperCase()+val.slice(1);
    })
    Vue.filter('lastUpper',function(val){
        let len=val.length;
        return val.slice(0,len-1)+val.charAt(len-1).toUpperCase();
    })
    var app=new Vue({
        el:'#app',
        data:{
            name:'',
        },
        //局部过滤器
        filters:{
            aba:function(val){
                return val+val.split('').reverse().join('')
            },
            //带参数过滤器
            mysubstr:function(val,start,end){
                if(val.length>0){
                    return "["+val.substring(start,end)+"]";
                }
                return '';

            }
        }
    })

</script>

</body>
</html>